
<template>
  <div class="app_content">
    <el-row :gutter="30">
        <el-col :span="4">
          <el-form :inline="true"  class="demo-form-inline" :size="size">
              <el-form-item label="名称" >
              <el-input v-model="deptName" clearable placeholder="请输入名称" :prefix-icon="Search"  style="width:180px;"/>
              </el-form-item>
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="treeRef"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
          />
          </el-form>
          
        </el-col>
        <el-col :span="20">
          <el-form :inline="true" ref="queryForm" :model="queryParams" class="demo-form-inline" :size="size" v-if="showSearch">
          <el-form-item label="用户名称" prop="userName">
                <el-input
                  v-model="queryParams.userName"
                  placeholder="请输入用户名称"
                  clearable
                  style="width: 180px"
                />
              </el-form-item>
              <el-form-item label="手机号码" prop="phonenumber">
                <el-input
                  v-model="queryParams.phonenumber"
                  placeholder="请输入手机号码"
                  clearable
                  style="width: 180px"
                />
              </el-form-item>
              <!-- <el-form-item label="状态" prop="status">
                <el-select
                  v-model="queryParams.status"
                  placeholder="用户状态"
                  clearable
                  style="width: 180px"
                >
                  <el-option
                    v-for="dict in statusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item> -->
              <el-form-item label="状态" prop="status">
                  <el-select
                     v-model="queryParams.status"
                     placeholder="用户状态"
                     clearable
                     style="width: 180px"
                  >
                     <el-option
                        v-for="dict in dicts.sys_normal_disable"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                     />
                  </el-select>
               </el-form-item>
          <el-form-item>
            <div class="queryButton">
              <el-button type="primary" @click="querySubmit">
          <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-search'"/>
          搜索</el-button>
        <el-button   @click="resetSubmit">
          <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-redo'"/>
          重置</el-button>
            </div>
          
          </el-form-item>
          </el-form>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                :size="size"
                @click="handleAdd"
                v-hasRole="['system:user:add']"
              >
              <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-add-one'"/>
              新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                plain
                :size="size"
                :disabled="single"
                @click="handleEdit"
                v-hasRole="['system:user:edit']"
              >
              <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-edit-one'"/>
              修改</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                :size="size"
                :disabled="multiple"
                @click="handleDelete"
                v-hasRole="['system:user:remove']"
              >
              <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-delete-five'"/>
              删除</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
              <Export  :dc="true"  :dr="true" :exlData="tableData" :tHead="ExportHead" :tName="'导出的标题'" ></Export>
            </el-col> -->
     
            <!-- <RightToolbar :showSearch="showSearch" @queryTable="getList" :columns="columns"/> -->
            <RightToolbar :showSearch="showSearch" @queryTable='getList' @showSearchClick='showSearchClick' :columns="columns"/>
          </el-row>
          <el-table :border="$border" v-loading="loading" :data="tableData" :height="maxHeight"   style="width: 100%" @selection-change="handleSelectionChange"  :size="size"
          >
          <el-table-column type="selection" width="55" />
          <el-table-column label="编号" prop="id" show-overflow-tooltip key="id" v-if="columns[0].visible">
            <template #default="scope">{{scope.$index+1}}</template>
            </el-table-column>
            <el-table-column label="用户名称"  key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
              <el-table-column label="用户昵称"  key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
              <el-table-column label="部门"  key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
              <el-table-column label="手机号码"  key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
          <el-table-column label="状态" prop="status"  show-overflow-tooltip key="status"  v-if="columns[5].visible">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="0"
                inactive-value="1"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip key="createTime"  v-if="columns[6].visible"/>
          <el-table-column label="操作" fixed="right" align="center"  width="300px">
          <template #default="scope" >
            <div v-if="scope.row.userId !== 1">
              <el-button  v-hasRole="['system:user:edit']" :size="size" type="success"  text @click="handleEdit(scope.row)"
              > <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-edit-one'"/>修改</el-button>
              <el-button
              :size="size"
              type="danger"
              text
              v-hasRole="['system:user:remove']"
              @click="handleDelete(scope.row)"
              ><component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-delete-five'"/>删除</el-button>
              <el-dropdown :size="size" v-if="scope.row.roleId !== 1"   @command="(command) => handleCommand(command, scope.row)">
            <el-button  class="el-dropdown-link" text :size="size">
              <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-more'"/>更多
              </el-button>
              <template #dropdown>
                <el-dropdown-menu >
                <div v-hasRole="['system:user:resetPwd']">
                <el-dropdown-item command="handleResetPwd" >
                  <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-lock'"/>
                  重置密码</el-dropdown-item>
                </div>
                <div v-hasRole="['system:user:edit']">
                <el-dropdown-item command="handleAuthRole">
                  <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-every-user'"/>
                  分配角色</el-dropdown-item>
                  </div>
              </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          </template>
          </el-table-column>
          </el-table>
          <div style="margin-top:10px;position: absolute;right: 0;margin-right:20px">
              <el-pagination
                v-model:currentPage="queryParams.pageNum"
                v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
          </div>
        </el-col>
    </el-row>
    <!-- <el-dialog  v-model="open"  :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="600px" append-to-body draggable :fullscreen="fullscreen">
      <template #header="{titleId, titleClass }">
      <div class="my-header">
        <span :id="titleId" :class="titleClass">{{title}}</span>
        <div>
          <component
        style="cursor:pointer;line-height: 24px;margin-right:10px;"
        v-if="fullscreen==false"
              @click="fullscreen=true"
              class="menu-icon"
              theme="outline"
              size="14"
              strokeWidth="3"
              :is="'icon-full-screen-one'"
            />
            <component
            v-else
        style="cursor:pointer;line-height: 24px;margin-right:10px;"
              @click="fullscreen=false"
              class="menu-icon"
              theme="outline"
              size="14"
              strokeWidth="3"
              :is="'icon-off-screen-one'"
            />
        <component
        style="cursor:pointer;line-height: 24px;"
              @click="cancel"
              class="menu-icon"
              theme="outline"
              size="14"
              strokeWidth="3"
              :is="'icon-close'"
            />
        </div>
        
      </div>
    </template>
    <el-form ref="formDataRef" :model="formData" :rules="rules" label-width="80px" :size="size">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="formData.nickName" placeholder="请输入用户昵称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <el-tree-select
                  v-model="formData.deptId"
                  :data="deptOptions"
                  check-strictly
                  :props="treeProps"
                  :render-after-expand="false"
                />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="formData.phonenumber" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="formData.userId == undefined" label="用户名称" prop="userName">
              <el-input v-model="formData.userName" placeholder="请输入用户名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="formData.userId == undefined" label="用户密码" prop="password">
              <el-input v-model="formData.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="formData.sex" placeholder="请选择性别">
                <el-option
                  v-for="dict in sexOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="formData.status">
                <el-radio
                  v-for="dict in statusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位">
              <el-select v-model="formData.postIds" multiple placeholder="请选择岗位">
                <el-option
                  v-for="item in postOptions"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色">
              <el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div  class="dialog-footer">
        <el-button type="primary" @click="submitForm" :size="size">确 定</el-button>
        <el-button @click="cancel" :size="size">取 消</el-button>
      </div>
      </template>
      
    </el-dialog> -->
    <el-drawer
      :title="title"
      v-model="open"
      direction="rtl"
      destroy-on-close
      size="50%"
      :close-on-click-modal="false"
    >
    <el-form ref="formDataRef" :model="formData" :rules="rules" label-width="80px" :size="size">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="formData.nickName" placeholder="请输入用户昵称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <el-tree-select
                  v-model="formData.deptId"
                  :data="deptOptions"
                  check-strictly
                  :props="treeProps"
                  :render-after-expand="false"
                />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="formData.phonenumber" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="formData.userId == undefined" label="用户名称" prop="userName">
              <el-input v-model="formData.userName" placeholder="请输入用户名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="formData.userId == undefined" label="用户密码" prop="password">
              <el-input v-model="formData.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="formData.sex" placeholder="请选择性别">
                <el-option
                  v-for="dict in  dicts.sys_user_sex"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="formData.status">
                <el-radio
                  v-for="dict in dicts.sys_normal_disable"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位">
              <el-select v-model="formData.postIds" multiple placeholder="请选择岗位">
                <el-option
                  v-for="item in postOptions"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色">
              <el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div  class="dialog-footer">
          <el-button type="primary" @click="submitForm" :size="size">
          <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-correct'"/>
          确 定</el-button>
        <el-button @click="cancel" :size="size">
          <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-return'"/>
          取 消</el-button>
      </div>
      </template>
    </el-drawer>
  
  </div>
  
</template>
<script  >
import RightToolbar from '@/components/RightToolbar/index.vue';
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  resetUserPwd,
  changeUserStatus,
  deptTreeSelect,
} from '@/api/system/user';
import { computed, ref, reactive, onMounted, getCurrentInstance, toRefs, watch, nextTick } from 'vue';
// import TreeSelect from '@/components/TreeSelectDept/index.vue'
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
export default defineComponent({
  components: {
    RightToolbar,
  },
  
  setup() {
    const { proxy } = getCurrentInstance(); //关键代码
    const queryForm = ref(null);
    const formDataRef = ref(null);
    const myTreeSelect = ref(ElTree);
    const treeRef = ref(ElTree);
    const { t } = useI18n();
    const store = useStore();
    const deptName = ref('');
    console.log(proxy.$useDict(["sys_normal_disable", "sys_user_sex"],store));
    const staticData = reactive({
      dicts:proxy.$useDict(["sys_normal_disable", "sys_user_sex"],store),
      formData: {},
      // 表单校验
      rules: {
        userName: [
          { required: true, message: '用户名称不能为空', trigger: 'blur' },
          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' },
        ],
        nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
        password: [
          { required: true, message: '用户密码不能为空', trigger: 'blur' },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
        ],
        email: [
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
          },
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
      },
      maxHeight: store.getters['setting/mode']=='horizontal'?document.body.clientHeight - 265:store.getters['setting/isFullScreen']!=false ?document.body.clientHeight - 360:document.body.clientHeight - 320 ,
      isFullScreen:store.getters['setting/isFullScreen'],
      treeis: false,
      single: true,
      multiple: true,
      showSearch: true,
      background: false,
      disabled: false,
      search: '',
      tableData: [],
      ids: [],
      userName: [],
      // 日期范围
      dateRange: [],
      // 菜单状态数据字典
      statusOptions: [],
      sexOptions: [],
      // 查询参数
      // 弹出层标题
      title: '',
      // 部门树选项
      deptOptions: undefined,
      //是否全屏
      fullscreen: false,
      // 是否显示弹出层
      open: false,
      // 部门名称
      // 默认密码
      initPassword: undefined,
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
      },
      total: 0,
      loading: true,
      ExportHead: {
          deptId: '部门',
          userName: '用户名称',
          nickName: '用户昵称',
          phonenumber: '电话号码',
          email: '邮箱',
          sex: '性别',
          status: '状态',
      },
      // 列信息
      columns: [
        { key: 0, label: `编号`, visible: true },
        { key: 1, label: `用户名称`, visible: true },
        { key: 2, label: `用户昵称`, visible: true },
        { key: 3, label: `部门`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true },
      ],
      treeProps: {
        label: 'label', // 设置节点显示的字段，默认为 'label'
        children: 'children', // 设置子节点的字段，默认为 'children'
        value: 'id',
        isLeaf: 'leaf', // 设置判断是否叶子节点的字段，默认为 'isLeaf'
      },
      data: [],
    });
    const size = computed(() => {
      return store.getters['setting/size'];
    });

    const small = computed(() => {
      return size.value == 'small' ? true : false;
    });

    const filterTableData = computed(() =>
      staticData.tableData.filter(
        (data) =>
          !staticData.search.value ||
          data.name.toLowerCase().includes(staticData.search.value.toLowerCase())
      )
    );
    onMounted(() => {
      nextTick(()=>{
        staticData.maxHeight = store.getters['setting/mode']=='horizontal'?document.body.clientHeight - 265:store.getters['setting/isFullScreen']!=false ?document.body.clientHeight - 360:document.body.clientHeight - 320 ;
      })
      proxy.getDeptTree();
      proxy.$getConfigKey('sys.user.initPassword').then((response) => {
        staticData.initPassword = response.msg;
      });
      // proxy.$getDicts('sys_normal_disable').then((response) => {
      //   staticData.statusOptions = response.data;
      // });

      // proxy.$getDicts('sys_user_sex').then((response) => {
      //   staticData.sexOptions = response.data;
      // });

      proxy.getList();
    });

    watch(deptName, (newVal, oldVal) => {
      //console.log("新值：", newVal, "   旧值：", oldVal)
      treeRef.value.filter(newVal);
    });

    /**
     * 重置表单效验方法
     */
    const resetForm = (formEl) => {
      if (!formEl.value) return;
      formEl.value.resetFields();
    };

    const methods = {
      getList() {
        staticData.loading = true;
        listUser(staticData.queryParams).then((response) => {
          staticData.tableData = response.rows;
          staticData.total = response.total;
          staticData.loading = false;
        });
      },

      /** 查询部门下拉树结构 */
      getDeptTree() {
        deptTreeSelect().then((response) => {
          staticData.deptOptions = response.data;
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        staticData.queryParams.deptId = data.id;
        proxy.querySubmit();
      },
      // 岗位状态字典翻译
      statusFormat(row, column) {
        const data = proxy.$selectDictLabel(staticData.statusOptions, row.status);
        let stateClass;
        // if(data=='正常'){
        //   stateClass='status_success'
        // }else{
        //   stateClass='status_error'
        // }

        return data;
      },
      // 更多操作触发
      handleCommand(command, row) {
        switch (command) {
          case 'handleResetPwd':
            proxy.handleResetPwd(row);
            break;
          case 'handleAuthRole':
            proxy.handleAuthRole(row);
            break;
          default:
            break;
        }
      },
      /** 重置密码按钮操作 */
      handleResetPwd(row) {
        ElMessageBox.prompt('请输入"' + row.userName + '"的新密码', t('confirm.title'), {
          confirmButtonText: t('btn.confirm'),
          cancelButtonText: t('btn.cancel'),
          closeOnClickModal: false,
          inputPattern: /^.{5,20}$/,
          inputErrorMessage: '用户密码长度必须介于 5 和 20 之间',
          type: 'warning',
        })
          .then(({ value }) => {
            resetUserPwd(row.userId, value).then((response) => {
              proxy.Success('修改成功，新密码是：' + value);
            });
          })
          .catch(() => {});
      },
      /** 分配角色操作 */
      handleAuthRole: function (row) {
        const userId = row.userId;
        this.$router.push({
          path: '/system/user-role',
          query: {
            userId: userId,
          },
        });
      },
      // 用户状态修改
      handleStatusChange(row) {
        let text = row.status === '0' ? '启用' : '停用';
        ElMessageBox.confirm(
          '确认要"' + text + '""' + row.userName + '"角色吗？',
          t('confirm.title'),
          {
            confirmButtonText: t('btn.confirm'),
            cancelButtonText: t('btn.cancel'),
            type: 'warning',
          }
        )
          .then(function () {
            return changeUserStatus(row.userId, row.status);
          })
          .then(() => {
            proxy.Success(text + '成功');
          })
          .catch(function () {
            row.status = row.status === '0' ? '1' : '0';
          });
      },
      /**
       * 显示或隐藏搜索条件
       **/
      showSearchClick(data) {
        staticData.showSearch = data;
      },
      /**表格多选 */
      handleSelectionChange(selection) {
        staticData.ids = selection.map((item) => item.userId);
        staticData.userName = selection.map((item) => item.userName);
        staticData.single = selection.length != 1;
        staticData.multiple = !selection.length;
      },
      /**新增数据 */
      handleAdd(row) {
        staticData.fullscreen = false;
        proxy.reset();
        getUser().then((response) => {
          staticData.treeis = true;
          staticData.postOptions = response.posts;
          staticData.roleOptions = response.roles;
          staticData.formData.password = staticData.initPassword;
        });
        staticData.open = true;
        staticData.title = '添加用户';
      },

      /**编辑数据 */
      handleEdit(row) {
        staticData.fullscreen = false;
        proxy.reset();
        const userId = row.userId || staticData.ids;

        getUser(userId).then((response) => {
          nextTick(() => {
            staticData.formData = response.data;
            staticData.postOptions = response.posts;
            staticData.roleOptions = response.roles;
            staticData.formData.postIds = response.postIds;
            staticData.formData.roleIds = response.roleIds;
            staticData.formData.password = '';
            staticData.treeis = true;
          });
          staticData.open = true;
          staticData.title = '修改用户';
        });
      },
      /**删除数据 */
      handleDelete(row) {
        const userIds = row.userId || staticData.ids;
        const userName = row.userName || staticData.userName;

        ElMessageBox.confirm(
          '是否确认删除用户名称为"' + userName + '"的数据项？',
          t('confirm.title'),
          {
            confirmButtonText: t('btn.confirm'),
            cancelButtonText: t('btn.cancel'),
            type: 'warning',
          }
        )
          .then(function () {
            return delUser(userIds);
          })
          .then(() => {
            proxy.getList();
            proxy.Success('删除成功');
          })
          .catch(() => {});
      },
      /**提交数据 */
      submitForm() {
        formDataRef.value.validate((valid) => {
          if (valid) {
            if (staticData.formData.userId != undefined) {
              updateUser(staticData.formData).then((response) => {
                proxy.Success('修改成功');
                staticData.open = false;
                proxy.getList();
              });
            } else {
              addUser(staticData.formData).then((response) => {
                proxy.Success('新增成功');
                staticData.open = false;
                proxy.getList();
              });
            }
          }
        });
      },
      /**关闭弹窗 */
      cancel() {
        //myTreeSelect.value.Subcancel()
        staticData.treeis = false;
        staticData.open = false;
      },
      // 表单重置
      reset() {
        staticData.formData = {
          userId: undefined,
          deptId: undefined,
          userName: undefined,
          nickName: undefined,
          password: undefined,
          phonenumber: undefined,
          email: undefined,
          sex: undefined,
          status: '0',
          remark: undefined,
          postIds: [],
          roleIds: [],
        };
        resetForm(formDataRef);
      },
      resetSubmit() {
        staticData.dateRange = [];
        queryForm.value.resetFields();
        proxy.getList();
      },
      querySubmit() {
        staticData.queryParams.pageNum = 1;
        proxy.getList();
      },
      handleSizeChange(val) {
        console.log(`${val} items per page`);
        staticData.queryParams.pageSize = val;
        proxy.getList();
      },
      handleCurrentChange(val) {
        console.log(`current page: ${val}`);
        staticData.queryParams.pageNum = val;
        proxy.getList();
      },
      
    };
    return {
      size,
      small,
      queryForm,
      myTreeSelect,
      formDataRef,
      deptName,
      treeRef,
      ...methods,
      filterTableData,
      ...toRefs(staticData),
    };
  },
});
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
<style scoped>
.app_content {
  margin-top: 30px;
  margin-left: 10px;
}
.mb8 {
  margin-bottom: 10px;
}
</style>